<template>
    <el-dialog v-model="dialogVisible" title="选择项目服务" width="800" class="container">
        <el-table :data="serviceItemsData" :stripe="true" style="font-size: 12px;" @selection-change="getChoseData"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e', }">
            <el-table-column type="selection" width="55" />
            <el-table-column label="项目编号" prop="_id" width="80" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="项目名称" prop="name" width="110" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="次数" prop="count" width="50"></el-table-column>
            <el-table-column label="项目类型" prop="type" width='80'></el-table-column>
            <el-table-column label="项目介绍" prop="intro"></el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onConfirmBtn(tagItem)">
                    确认
                </el-button>
            </div>
        </template>
        <div class="flex-end" style="margin-top: 22px;" v-if="pageData">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :background="true" layout="total, prev, pager, next" :total="total" />
        </div>

    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { findServiceItemsApi } from '../../../api/servicePacks';
const serviceItemsData = ref([]);
const dialogVisible = ref(false);
const total = ref(0);
const pageData = ref({
    currentPage: 5,
    pageSize: 10,
});
const choseServiceItems = ref([]);
const choseData = defineModel();
const openDialog = () => {
    dialogVisible.value = true;
}
onMounted(() => {
    findServiceItems();
});
defineExpose({
    openDialog
});



//确认按钮
function onConfirmBtn() {
    choseData.value = choseServiceItems.value
    dialogVisible.value = false;
}

//获取选中的选项
function getChoseData(newSelection) {
    choseServiceItems.value = newSelection;
};

//请求数据
function findServiceItems() {
    findServiceItemsApi().then(res => {
        if (res.code == 200) {
            serviceItemsData.value = res.data.rows;
            total.value = res.total;
        }
    })
}
</script>

<style scoped></style>